<%@page import="com.alibaba.fastjson.JSON"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>查看排队进程</title>
<style type="text/css">

body{
	min-width:800px;
	font-size:14px;
	background-image: url("image/body_bj.jpg");
}
	#head{
		padding-top: 1%;
		margin: 0 auto;
		text-align: center;
		margin: 0 auto;
	}
	.typeA,.typeB,.typeC,.typeD{
		width: 24%;
		height: auto;
		display: inline-block;
		position:relative;
		float:left;
		border-left: 2px solid #0099FF;
		border-right: 2px solid #0099FF;
	}
	#titleA0,#titleB0,#titleC0,#titleD0{
		width: 100%;
		height: 40px;
		text-align: center;
		font-size: 14px;
		font-weight: bold;
	}
	#titleA1,#titleB1,#titleC1,#titleD1{
		width:18%;
		height:20px;
		text-align: center;
		display: inline-block;
		border-right: 1px solid #999999;
	}
	#titleA2,#titleB2,#titleC2,#titleD2{
		width:30%;
		height:20px;
		display: inline-block;
		text-align: center;
		border-right: 1px solid #999999;
	}
	#titleA3,#titleB3,#titleC3,#titleD3 {
		width:40%;
		height:20px;
		display: inline-block;
		text-align: center;
	}
	.contentA1,.contentB1,.contentC1,.contentD1{
		width:18%;
		height:20px;
		display: inline-block;
		text-align: center;
		border-right: 1px solid #999999;
	}
	.contentA2,.contentB2,.contentC2,.contentD2{
		width:33%;
		height:20px;
		display: inline-block;
		text-align: center;
		border-right: 1px solid #999999;
	}
	.contentA3,.contentB3,.contentC3,.contentD3{
		width:40%;
		height:20px;
		display: inline-block;
		text-align: center;
	}
	
</style>

</head>
<body>
	<div id="head">
		<h2>餐厅排队进程</h2>
		<hr>
	</div> 
	
	<!-- 隐藏的iframe，src="comet"是CometServlet对应的URL，用于加载服务器推送的JS脚本 -->  
   <!--  <iframe id="iframe" style="display: none;" src="CometServlet" onload="iframeRefresh();"></iframe> -->
	<div class="typeA">
		<div id="titleA0">两人桌</div>
		<div id="titleA1">顺序：</div>
		<div id="titleA2">排队号：</div>
		<div id="titleA3">餐桌：</div>
	</div>
	<div class="typeB">
		<div id="titleB0">四人桌</div>
		<div id="titleB1">顺序：</div>
		<div id="titleB2">排队号：</div>
		<div id="titleB3">餐桌：</div>
	</div>
	<div class="typeC">
	<div id="titleC0">八人桌</div>
		<div id="titleC1">顺序：</div>
		<div id="titleC2">排队号：</div>
		<div id="titleC3">餐桌：</div>		
	</div>
	<div class="typeD">
		<div id="titleD0">十二人桌</div>
		<div id="titleD1">顺序：</div>
		<div id="titleD2">排队号：</div>
		<div id="titleD3">餐桌：</div>
	</div>
</body>

<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script>
	
	/* //服务器timeout后再重新加载iframe  
	function iframeRefresh() {  
	    var src=$("#iframe").attr("src"); 
	    $("#iframe").attr("src",src);
	}  */
	
	//删除页面所有排队数据
	function removeMsg(){
		$(".contentA1").remove();
		$(".contentA2").remove();
		$(".contentA3").remove();
		$(".contentB1").remove();
		$(".contentB2").remove();
		$(".contentB3").remove();
		$(".contentC1").remove();
		$(".contentC2").remove();
		$(".contentC3").remove();
		$(".contentD1").remove();
		$(".contentD2").remove();
		$(".contentD3").remove();
	}
	//根据餐桌类型加载数据
	function updateMsg(prant,chid,msg){
		var x="<div class='"+chid+"'>"+msg+"</div>";
		$(prant).append(x);
	}
	//发送请求更新页面
	function sendRequest(){
		$.get("DuiLieServlet",{op:1},function(v){
			var data=eval("("+v+")");
			removeMsg();
			for(var i=0;i<data.length;i++){
				var type=data[i].table_type;
				var one=".type"+type;
				var two="content"+type+"1";
				var three="content"+type+"2";
				var four="content"+type+"3";
				updateMsg(one,two,data[i].shunxu);
				updateMsg(one,three,data[i].number);
				updateMsg(one,four,data[i].table_name);
			}
		});
	}
	
	setInterval(sendRequest,5000);
	$(function(){
		$(document).ready(function(){
			sendRequest();
		});
	});
	

</script>
</html>